<template lang="html">
  <div class="center-list">
    <ul class="center-lists">
      <li>
        <img src="../../../../static/img/information_vip.png" alt="">
        <span>会员中心</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_center.png" alt="">
        <span>消息中心</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_online.png" alt="">
        <span>在线听歌免流量</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_sweep.png" alt="">
        <span>扫一扫</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_skin.png" alt="">
        <span>个性换肤</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_listen.png" alt="">
        <span>听歌识曲</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_timing.png" alt="">
        <span>定时播放</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_bell.png" alt="">
        <span>魔笛铃声</span>
        <img class="list-img" src="../../../../static/img/mine-index_next.png" alt="">
      </li>
      <li>
        <img src="../../../../static/img/information_lock.png" alt="">
        <span>锁屏歌词</span>
        <p v-if='btn1' class='btn-left' @click='changeBtn1'> <span class="right"></span></p>
        <p v-else class='btn-right' @click='changeBtn1'> <span class="left"></span></p>
      </li>
      <li>
        <img src="../../../../static/img/information_desktop.png" alt="">
        <span>桌面歌词</span>
        <p v-if='btn2' class='btn-left' @click='changeBtn2'> <span class="right"></span></p>
        <p v-else class='btn-right' @click='changeBtn2'> <span class="left"></span></p>
      </li>
      <li>
        <img src="../../../../static/img/information_warn.png" alt="">
        <span>流量提醒</span>
        <p v-if='btn3' class='btn-left' @click='changeBtn3'> <span class="right"></span></p>
        <p v-else class='btn-right' @click='changeBtn3'> <span class="left"></span></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:'CenterList',
  data(){
    return{
      btn1:true,
      btn2:true,
      btn3:false
    }
  },
  methods:{
    changeBtn1(){
      this.btn1 = !this.btn1
    },
    changeBtn2(){
      this.btn2 = !this.btn2
    },
    changeBtn3(){
      this.btn3 = !this.btn3
    }
  }

}
</script>

<style lang="less" scoped>
.center-list{
  width: 100%;
  margin-top: 10/100rem;

  .center-lists{
    width: 100%;

    li{
      width: 100%;
      height: 75/100rem;
      float: left;
      font-size: 24/100rem;
      border-bottom: 1/100rem solid #ccc;
      position: relative;

      img{
        height: 40/100rem;
        width: 40/100rem;
        margin-left: 36/100rem;
        margin-top: 18/100rem;
        float: left;
      }

      span{
        display: inline-block;
        height: 75/100rem;
        float: left;
        color:#333;
        margin-left: 20/100rem;
        line-height: 75/100rem;
      }

      .list-img{
        height: 32/100rem;
        width: 17/100rem;
        float: right;
        margin-top: 26/100rem;
        margin-right: 66/100rem;
      }

      p{
        width: 60/100rem;
        height: 30/100rem;
        border-radius: 20/100rem;

        position: absolute;
        top: 22/100rem;
        right:46/100rem;

        span{
          display: inline-block;
          width: 30/100rem;
          height: 30/100rem;
          position: absolute;
          top: -2/100rem;
          border-radius: 50%;
        }
        span.left{
          left:0;
          background-color: #333;
          border:2/100rem solid #333;
          margin-left: 0;
          // display: none;
        }
        span.right{
          right:0;
          background-color: #c997f5;
          border:2/100rem solid #c997f5;
        }
      }

      p.btn-left{
        border: 1/100rem solid #c997f5;
      }
      p.btn-right{
        border: 1/100rem solid #333;
      }
    }
  }
}
</style>
